<?php
$node_id = $this->get_data('node_id');
$url_segment = $this->get_data('url_segment');
$node_nav = m('node')->get_node_nav($node_id);

$_parent_id = isset($node_nav[1]) ? $node_nav[1]['id'] : false;
$_selected_node_id = isset($node_nav[2]) ? $node_nav[2]['id'] : false;

$_current_url = tos_http_get('url');
?>
<div id="left_bar">
<?php m('rdf')->block_menu_product_ranges($node_id)->display();?>
</div>

<div id="main_bar">
<div style="margin: 36px;">
<div id="nav">
    <?php m('node')->block_node_nav($node_id)->display();?>
</div>
<div id="range-img">
    <?php 
    if ($this->get_data('images')){
        $images = $this->get_data('images');
        $image = array_pop($images);
        if ($image['link']) {
            echo '<a href="' . tos_url($image['link']) . '">' . tos_img($image['src'], 591) . '</a>';
        } else {
            echo tos_img($image['src'], 591);
        }
    }
    ?>
</div>



<div id="range-pro-wrap">
    <div class="block">
                <img onmouseover="move_left();" onmouseout="move_stop();" src="<?php echo tos_cdn_url('img/icon/move-left.jpg');?>">
            </div>
    <div id="range-pro" class="block">
        
        <div id="range-pro-list" style="width: 740px; left:0px;">
            <?php m('rdf')->block_products_by_range_id($node_id)->display();?>
        </div>
    </div>
    <div class="block">
                <img onmouseover="move_right();" onmouseout="move_stop();" src="<?php echo tos_cdn_url('img/icon/move-right.jpg');?>">
            </div>
    </div>


</div>
</div><div class="clear"></div>
<script> 
window.onload = function () {
    var sli = document.getElementById('range-pro-list');
    var as = sli.getElementsByTagName('a');
    sli.style.width = (as.length * 148) + 'px'; 
}
var step = 0;
function move_stop() {
    step = 0;
}
function move_left() {
    step = 25;
    sli_move();
}
function move_right() {
    step = -25;
    sli_move();
}
function sli_move() {
    var x=0;
    var sli = document.getElementById('range-pro-list');
    var width = parseInt(sli.style.width);
    x = parseInt(sli.style.left) + step;
    var min_x = 591 - width;
    
    if (step !=0 && x <0 && x > min_x) {
        sli.style.left = x + "px";
        setTimeout("sli_move()", 100);
    } else if ( x >= 0) {
        sli.style.left = "0px";
        step = 0;
    } else if ( x <= min_x ) {
        sli.style.left = min_x + "px";
        step = 0;
    }
    
}
 
</script> 